<template>
  <div class="pd20">
      <el-form :inline="true" :model="quertInfo" class="demo-form-inline">
          <el-form-item label="咨询师等级">
              <el-input v-model="quertInfo.levelName" placeholder="请输入咨询师等级" clearable />
          </el-form-item>
          
          <el-form-item>
              <el-button type="primary" @click="getconsultLevelList">搜索</el-button>
          </el-form-item>
      </el-form>
      <div class="mb20">
          <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
          <el-button @click="toScopeDelete" type="danger" icon="Delete" plain>删除</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" row-key="id" @selection-change="handleSelectionChange" >
          <el-table-column type="selection" width="55"/>
          <el-table-column fixed prop="id" label="id" width="150" />
          <el-table-column prop="levelName" label="咨询师等级" width="150" />
          
          <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                  <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
                  <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="quertInfo.pageNum" v-model:page-size="quertInfo.pageSize"
          :page-sizes="[1, 5, 10, 20]" :size="size" :disabled="disabled" :background="false"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
  </div>

  <!-- 添加，编辑弹框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
      <el-form :model="consultLevel">
          <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input v-model="consultLevel.id" autocomplete="off" />
          </el-form-item>

          <el-form-item label="咨询师等级" :label-width="formLabelWidth">
              <el-input v-model="consultLevel.levelName" autocomplete="off" />
          </el-form-item>
      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button @click="close">取消</el-button>
              <el-button type="primary" @click="saveOrUpdate(row)">
                  {{ saveOrUpdateTitle }}
              </el-button>
          </div>
      </template>
  </el-dialog>
</template>
<script setup>
import {  ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post, put, del } from '@/http/http' // 引入封装好的请求方法

//数据开始
const selectedIds = ref([]);
const consultLevel = ref({
  id: 0,
  levelName: ''
})

const saveOrUpdateVisible = ref(false);
const saveOrUpdateTitle = ref('添加');
const quertInfo = ref({
  pageNum: 1,
  pageSize: 5,
  levelName: '' 
})

const total = ref(0);
const tableData = ref([]);
//数据结束
//批量删除
const toScopeDelete = () => {
  if (selectedIds.value.length == 0) {
      ElMessage({
          message: '请选择要删除的记录！',
          type: 'error',
      })
      return;
  } else {
      ElMessageBox.confirm(
          '真的要删除吗？',
          '提示',
          {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
          }
      )
      .then(() => {
          //调用后端删除接口
          post('/wt/consultantlevel/deletelevelByIds', selectedIds.value)
          .then(res => {
              if (res.code == 0) {
                  getconsultLevelList();
                  ElMessage({
                      message: '删除成功！',
                      type: 'success',
                  })
                  getconsultLevelList();
              } else {
                getconsultLevelList();
                  ElMessage({
                      message: '删除失败！',
                      type: 'error',
                  })
              }
          })
      })
  }
}

const handleSelectionChange = (val) => {
  selectedIds.value = val.map(item => item.id);
}

const handleSizeChange = (val) => {
  quertInfo.value.pageSize = val;
  quertInfo.value.pageNum = 1;
  getconsultLevelList();
}

const handleCurrentChange = (val) => {
  quertInfo.value.pageNum = val;
  getconsultLevelList();
}

const onDel = id => {
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
      }
  )
  .then(() => {
      //调用后端删除接口
      del(`/wt/consultantlevel/delete/`, { params: { id: id } })
      .then(res => {
          if (res.code != 1) {
            getconsultLevelList();
              ElMessage({
                  message: '删除失败！',
                  type: 'error',
              })
          } else {
            getconsultLevelList();
              ElMessage({
                  message: '删除成功！',
                  type: 'success',
              })
              getconsultLevelList();
          }
      })
  })
}

//  去添加的页面
const toAdd = () => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  consultLevel.value = {
      id: 0,
      levelName: ''
  };

}

//  保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加') {
      // 调用后端接口添加
      post('/wt/consultantlevel/add', consultLevel.value)
      .then(resp => {
          if (resp.code == 1) {
              // 重新获取列表
              getconsultLevelList();
          } else {
              console.log('添加文章失败')
          }
      })
  } else {
      // 调用后端接口修改
      put('/wt/consultantlevel/update', consultLevel.value)
      .then(resp => {
          if (resp.code == 1) {
              // 重新获取列表
              getconsultLevelList();
          } else {
              console.log('修改文章失败')
          }
      })
  }
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  consultLevel.value = {
      id: 0,
      levelName: ''
  }
}

//  去修改的页面
const toEdit = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  consultLevel.value = row;
}

const getconsultLevelList = () => {
  //使用封装的请求方法请求数据
  get('/wt/consultantlevel/getAll', quertInfo.value)
  .then(res => {
      if (res.code == 1) {
          tableData.value = res.data.list;
          total.value = res.data.total;
      } else {
          console.log('获取咨询师等级失败')
      }
  })
  .catch(err => {
      console.log('err', err);
  })
}

//钩子函数开始
onMounted(() => {
  console.log('onMounted');
  getconsultLevelList();
})
  //取消
  const dialogVisible = ref(false);
  const fileList = ref([]);
  const close = ()=>{
      dialogVisible.value = false;
      getconsultLevelList();
      fileList.value = [];
  }


</script>
<style scoped>
.pd20{padding: 20px;}
</style>